<template>
	<view class="content">
		<u-navbar :is-back="true" :title="title" title-color="white" :background="background"></u-navbar>
		
		<view class="item_wrap" v-for="(info, index) in infoList" :key="index" v-if="info.resType==0">
			<view class="set-wapper" :data-id="info.id" :data-index="index" @tap="removePub">
				<image src="../../static/delete.png" class="settings" ></image>	
			</view>
			<navigator :url="'../good_detail/good_detail?id=' + info.id" >
				<view class="card" >
					<view class="top">
						<text>{{info.name}}</text>
					</view>
					
					<view class="middle">
						<view class="left">
							<image :src="baseimg_url +info.picture" mode="aspectFit"></image>
						</view>
						<view class="right">
							<view class="content">
								<text>
									{{info.description}}
								</text>
							</view>
							<view class="tags" >
								<view class="item">
									{{(info.resType == 0)?"失物招领":((info.resType == 1)?"寻物启事":" ")}}
								</view>								
							</view>					
						</view>
					</view>	
					
					<view class="bottom">
						<view class="left">
							{{info.gmtModify}}
						</view>
						<view class="right">	
							<view class="comments">
								
							</view>
							<view class="comments">
								
							</view>
							<view class="comments">
								<u-icon name="eye" color="#99CCFF"></u-icon>
								<text>101</text>
							</view>
						</view>
					</view>
				</view>
			</navigator>	
		</view>

	</view>
</template>

<script>
	export default{
		data(){
			return {
				title:"我找失主",
				background:{
					backgroundImage:'linear-gradient(to top, #ffd655 0%, #fda085 100%)',
				},
				infoList:[],
				baseimg_url:this.baseimgUrl,
			}
		},
		onLoad(){
			var me=this;
			var userInfo = uni.getStorageSync("globalUser").user;
			me.userInfo = userInfo;
			me.getmylost();
		},
		methods:{
			getmylost : function(){
				var me=this;	
				uni.request({
					url: me.baseUrl + '/mini_program/res/getPictureListBySkey/' + me.userInfo.skey,
					method: 'GET',
					success: res => {
						me.infoList = res.data.data.list;
					}
				});
			},
			removePub:function(e){
				var me = this;
				var goods_id = e.currentTarget.dataset.id;
				var index = e.currentTarget.dataset.index;
				console.log(goods_id);
				console.log(me.userInfo);
				uni.showModal({
				                title:"提示",
				                content:"确定要删除吗?",
				                success:function(e){
				                    if(e.confirm == true){
				                        uni.request({
				                            url: me.baseUrl + '/mini_program/res/deleteRes/' + me.userInfo.skey + "?resId=" + goods_id,
				                            method: 'POST',
				                            success: res => {
				                                console.log(res);
				                                if(res.data.code == 20000){
				                                    uni.showToast({title: "已删除", icon:"none"});
													me.infoList.splice(index,1)
				                                }else{
				                                    uni.showToast({title: "删除失败", icon:"none"});
				                                }
				                            }
				                        });
				                    }
				                }
				            });
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
			.set-wapper {
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				width: 15%;
				float:right;
			}
			
			.settings {
				width: 60upx;
				height: 60upx;
			}
			
			.card {
				width: 700rpx;
				height: 250rpx;
				display: flex;
				flex-direction: column;
				margin: 20rpx auto;
				border-radius: 20rpx;
				background-color: #F1F1F1;
				// background-color: rgba($color: #000000, $alpha: 0.2);
	
				.top {
					text {
						font-size: 35rpx;
						font-weight: bold;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						overflow: hidden;
						margin: 5rpx 10rpx;
					}
				}
	
				.middle {
					display: flex;
					height: 200rpx;
	
					.left {
						//background-color: rgba($color: #000000, $alpha: 0.3);
						image {
							width: 250rpx;
							height: 150rpx;
							margin: 0 20rpx 10rpx 10rpx;
							border-radius: 10rpx;
	
						}
					}
	
					.right {
						flex: 1;
						.content {
								text{
									display: -webkit-box;
									-webkit-line-clamp: 3;
									-webkit-box-orient: vertical;
									overflow: hidden;
								}
						}
						
						.tags {
							display: flex;
							width: 400rpx;
							white-space: nowrap;
							overflow: hidden;
							.item{
								margin-right: 20rpx;
								background-color: rgba($color: #000000, $alpha: 0.08);
								padding: 5rpx 10rpx;
								border-radius: 5rpx;
								font-size: 25rpx;
								
							}							
						}					
					}
				}
				
				.bottom{
					// flex: 1;
					display: flex;
					// background-color: rgba($color: #000000, $alpha: 0.5);
					height: 70rpx;
					align-items: center;
					justify-content: space-between;
					.left{
						font-size: 30rpx;
						margin-left: 10rpx;
					}
					.right{
						flex: 1;
						display: flex;
						justify-content: space-around;
						margin: 0 40rpx;
						.comments{
							text{margin-left: 8rpx;}
						}
						.zan{
							text{margin-left: 8rpx;}
						}
						.view{
							text{margin-left: 8rpx;}
						}
					}
				}
			}
		}
</style>


